import React, { Component } from 'react';
import "../styles/MyList.scss"
import pic from "../assets/1.png"


class MyList extends Component {
    constructor(props) {
        super(props)
        this.state = {
            currentIndex: 0, //用来保存点击的一级分类的下标
            catelist: [//一级分类列表
                {
                    name: '活动专区',
                    list2: [
                        {
                            name: '面部护理',
                            list3: [
                                { pic, name: '卸妆' },
                                { pic, name: '洁面/去角质' },
                                { pic, name: '爽肤水/喷雾' },
                                { pic, name: '乳液' },
                                { pic, name: '精华/精油' },
                                { pic, name: '面霜' },
                                { pic, name: '面膜' },
                                { pic, name: '防晒隔离' },
                                { pic, name: '润唇膏/唇膜' },
                                { pic, name: '面部套装' },
                                { pic, name: '其他面部' },
                            ]
                        }
                    ]
                },
                {
                    name: '品牌',
                    list2: [
                        {
                            name: '品牌',
                            list3: [
                                { pic, name: '卸妆' },
                                { pic, name: '洁面/去角质' },
                                { pic, name: '爽肤水/喷雾' },
                                { pic, name: '乳液' },
                                { pic, name: '精华/精油' },
                                { pic, name: '面霜' },
                                { pic, name: '面膜' },
                                { pic, name: '防晒隔离' },
                                { pic, name: '润唇膏/唇膜' },
                                { pic, name: '面部套装' },
                                { pic, name: '其他面部' },
                            ]
                        }
                    ]
                },
                {
                    name: '美容护肤',
                    list2: [
                        {
                            name: '美容护肤',
                            list3: [
                                { pic, name: '卸妆' },
                                { pic, name: '洁面/去角质' },
                                { pic, name: '爽肤水/喷雾' },
                                { pic, name: '乳液' },
                                { pic, name: '精华/精油' },
                                { pic, name: '面霜' },
                                { pic, name: '面膜' },
                                { pic, name: '防晒隔离' },
                                { pic, name: '润唇膏/唇膜' },
                                { pic, name: '面部套装' },
                                { pic, name: '其他面部' },
                            ]
                        }
                    ]
                },
                {
                    name: '彩妆',
                    list2: [
                        {
                            name: '彩妆',
                            list3: [
                                { pic, name: '卸妆' },
                                { pic, name: '洁面/去角质' },
                                { pic, name: '爽肤水/喷雾' },
                                { pic, name: '乳液' },
                                { pic, name: '精华/精油' },
                                { pic, name: '面霜' },
                                { pic, name: '面膜' },
                                { pic, name: '防晒隔离' },
                                { pic, name: '润唇膏/唇膜' },
                                { pic, name: '面部套装' },
                                { pic, name: '其他面部' },
                            ]
                        }
                    ]
                },
                {
                    name: '香水',
                    list2: [
                        {
                            name: '香水',
                            list3: [
                                { pic, name: '卸妆' },
                                { pic, name: '洁面/去角质' },
                                { pic, name: '爽肤水/喷雾' },
                                { pic, name: '乳液' },
                                { pic, name: '精华/精油' },
                                { pic, name: '面霜' },
                                { pic, name: '面膜' },
                                { pic, name: '防晒隔离' },
                                { pic, name: '润唇膏/唇膜' },
                                { pic, name: '面部套装' },
                                { pic, name: '其他面部' },
                            ]
                        }
                    ]
                },
                {
                    name: '酒类',
                    list2: [
                        {
                            name: '酒类',
                            list3: [
                                { pic, name: '卸妆' },
                                { pic, name: '洁面/去角质' },
                                { pic, name: '爽肤水/喷雾' },
                                { pic, name: '乳液' },
                                { pic, name: '精华/精油' },
                                { pic, name: '面霜' },
                                { pic, name: '面膜' },
                                { pic, name: '防晒隔离' },
                                { pic, name: '润唇膏/唇膜' },
                                { pic, name: '面部套装' },
                                { pic, name: '其他面部' },
                            ]
                        }
                    ]
                },
                {
                    name: '腕表首饰',
                    list2: [
                        {
                            name: '腕表首饰',
                            list3: [
                                { pic, name: '卸妆' },
                                { pic, name: '洁面/去角质' },
                                { pic, name: '爽肤水/喷雾' },
                                { pic, name: '乳液' },
                                { pic, name: '精华/精油' },
                                { pic, name: '面霜' },
                                { pic, name: '面膜' },
                                { pic, name: '防晒隔离' },
                                { pic, name: '润唇膏/唇膜' },
                                { pic, name: '面部套装' },
                                { pic, name: '其他面部' },
                            ]
                        }
                    ]
                },
                {
                    name: '服饰箱包',
                    list2: [
                        {
                            name: '服饰箱包',
                            list3: [
                                { pic, name: '卸妆' },
                                { pic, name: '洁面/去角质' },
                                { pic, name: '爽肤水/喷雾' },
                                { pic, name: '乳液' },
                                { pic, name: '精华/精油' },
                                { pic, name: '面霜' },
                                { pic, name: '面膜' },
                                { pic, name: '防晒隔离' },
                                { pic, name: '润唇膏/唇膜' },
                                { pic, name: '面部套装' },
                                { pic, name: '其他面部' },
                            ]
                        }
                    ]
                },
                {
                    name: '食品保健',
                    list2: [
                        {
                            name: '食品保健',
                            list3: [
                                { pic, name: '卸妆' },
                                { pic, name: '洁面/去角质' },
                                { pic, name: '爽肤水/喷雾' },
                                { pic, name: '乳液' },
                                { pic, name: '精华/精油' },
                                { pic, name: '面霜' },
                                { pic, name: '面膜' },
                                { pic, name: '防晒隔离' },
                                { pic, name: '润唇膏/唇膜' },
                                { pic, name: '面部套装' },
                                { pic, name: '其他面部' },
                            ]
                        }
                    ]
                },
            ]
        }
    }

    handleClick(index) {
        this.setState({ currentIndex: index });
    }


    render() {
        return (
            <div className='cate'>
                {/*左侧导航栏*/}
                <div className="left">
                    {
                        this.state.catelist.map((item, index) => {
                            return (
                                <div onClick={() => { this.handleClick(index) }} className={'name ' + (this.state.currentIndex == index ? 'active' : '')} key={index} >{item.name}</div>
                            )
                        })
                    }
                </div>
                {/*右侧商品区域*/}
                <div className="right">
                    {/* 二级列表 */}
                    {//item2是每个二级分类
                        this.state.catelist[this.state.currentIndex].list2.map((item2, index) => {
                            return (
                                <div className="list2" key={index}>
                                    <h2>{item2.name}</h2>
                                    {/* 三级列表 */}
                                    <div className="list3">
                                        {
                                            //item2.list3是二级分类的三级分类列表
                                            //item3是每个三级分类
                                            item2.list3.map((item3, index) => {
                                                return (
                                                    <div className="item3" key={index}>
                                                        <img src={item3.pic} alt="" />
                                                        <div className="name">{item3.name}</div>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                </div>
                            )
                        })
                    }

                </div>

            </div>
        );
    }
}

export default MyList;